<template>
  <div>
    <p>去改仓库中counter模块的值</p>
    <p>
      <!-- <button @click="add">同步的更改仓库中模块的值</button> -->
      <button @click="add(6)">同步的更改仓库中模块的值</button>
    </p>
    <p>
      <!-- <button @click="asyncAdd">异步的更改仓库中模块的值</button> -->
      <button @click="asyncJia(5)">异步的更改仓库中模块的值</button>
    </p>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
export default {
  methods: {
    // add () {
    //   // console.log(this.$store)
    //   this.$store.commit('counter/add', 6)
    // },
    // asyncAdd() {
    //   this.$store.dispatch('counter/asyncAdd', 7)
    // },
    /**
     * 参数1：模块名
     * 参数2：mutations的名字【没有改名字的】
     */
    ...mapMutations('counter', ['add']),
    /**
     * 参数1：模块名
     * 参数2：对象，这里改了原有的action的名字
     */
    ...mapActions('counter', {
      // 新的名字在前面
      asyncJia: 'asyncAdd'
    })
  }
}
</script>
